<!-- 添加/修改-角色 -->
<template>
    <el-dialog 
        v-el-drag-dialog="{drag: true, full: false, resize: false}"
        :visible="true"
        :close-on-click-modal="false"
        @close="closeMd"
        :title="(fm.ps.uid ? '修改' : '添加')+'-角色'"
        width="400px">
        <el-form 
            class="adup-role"
            :model="fm.ps" 
            :ref="fm.fname" 
            :label-width="'100px'"
            @keyup.enter.native="submitFm"
        >   
            <el-form-item label="父级角色" v-if="pobj">
                <el-input :value="pobj.name" :readonly="true"></el-input>
            </el-form-item>

            <el-form-item 
                label="角色名称"
                prop="name"
                :rules="[
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { maxlength: 15, message: '角色名称最多15个字符', trigger: 'blur' },
                ]"
            >
                <el-input 
                    v-model="fm.ps.name" 
                    placeholder="角色名称"
                ></el-input>
            </el-form-item>

            <el-form-item 
                label="角色描述"
                prop="description"
                :rules="[
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                    { maxlength: 50, message: '角色描述最多50个字符', trigger: 'blur' },
                ]"
            >
                <el-input 
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 6 }"
                    placeholder="角色描述"
                    maxlength="50"
                    show-word-limit
                    v-model="fm.ps.description"
                    style="width: 280px;"
                ></el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" :icon="fm.ps.uid ? 'el-icon-edit' : 'el-icon-plus'" :disabled="fm.sb.load" @click="submitFm">{{fm.sb.text}}</el-button>
                <el-button type="info" :icon="'el-icon-close'" @click="closeMd">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';

import * as authManageService from '@/api/services/auth.manage.service';

export default {
  name: 'AdupRole',
  directives: { elDragDialog },
  props: { myData: Object },
  data() {
    return {
        // 所属部门id
        deptId: this.myData.deptId || '',
        // 父级对象
        pobj: this.myData.pobj || null, 
        // 修改对象
        obj: this.myData.obj || null,
        fm: {
            fname: 'adupRoleFm',
            sb: { load: false, text: '提交' },
            ps: {
                // 修改角色id
                uid: '',
                // 所属部门id
                deptId: '',
                // 添加角色父级id
                pid: '',
                // 角色名称
                name: '',
                // 角色描述
                description: '',
            }
        }
    }
  },
  created(){
    const that = this;

    console.log(that.myData);

    if(that.pobj){// 添加
        that.fm.ps.pid = that.pobj.id;
    }

    if(that.deptId){ // 添加
        that.fm.ps.deptId = that.deptId;
    }

    if(that.obj){ // 修改-回填修改参数
        that.fm.ps = {
            uid: that.obj.id,
            deptId: that.obj.deptId,
            pid: that.obj.pid,
            name: that.obj.name,
            description: that.obj.description
        };
    }

  },
  methods:{
    closeMd(){ // 关闭弹框
        this.$emit('myClick', {state: false});
    },
    
    // 提交-表单
    submitFm(){
        const that = this, ps = that.fm.ps;
        
        that.$refs[that.fm.fname].validate((valid) => {
            if (!valid) {
                return false; 
            }else{
                that.fm.sb.load = true;
                let loading = that.U.qloading('提交中，请稍后...');
                
                authManageService.adupDeptRole(ps).then(res => {
                    that.fm.sb.load = false;
                    that.U.qclose(loading);
                    
                    if(!res || res.code != 1){
                        that.U.qerror(res.msg);
                    }else {
                        that.U.qsuccess(res.msg);

                        // 关闭弹框
                        that.closeMd();

                        // 调用父组件方法-重新加载数据
                        that.$emit('reloadDg', ps.deptId);
                    }
                }).catch(() => { that.U.qclose(loading); });
            }
       });
    }
  },
 }
</script>

<style lang="less" scoped>
.adup-role{
    margin-bottom: 25px;
}
</style>